<template>
    <div class="home-show">
      <h3>精彩节目推荐</h3>
      <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
          <li v-for="(item, index) in listData" :key="index" @click="selectItem(item)">
            <div class="cover">
              <van-image :src="item.coverUrl" />
              <!-- <van-image :src="item.typeTitle" radius="10" /> -->
            </div>
            <span class="name">{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
  import { betterScrollHorizontal } from "../../common/betterScroll.js";
export default {
    data() {
      return {
        listData: [],
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.$request("get", "/program/recommend", {}).then((res) => {
          console.log(res);
          this.listData = res.programs;
          betterScrollHorizontal(
            this,
            this.$refs.wrapper,
            this.$refs.content,
            this.listData.length,
            10
          );
        });
      },
      selectItem(item){
        const id=item.id;
        console.log(id)
        this.$router.push({
          name:"ShowList",
          params:{
            id:id
          }
        })
      }
    },
  };
</script>
<style scoped>
.wrapper {
  width: 100%; /**容器得宽度就是屏幕得宽度 */
  overflow: hidden;
}
ul.content > li {
  width: 10rem;
  display: inline-block;
  vertical-align: top;
}
ul.content > li * {
  margin: 0 0.3rem;
}
ul.content > li > span {
  font-size: 0.8rem;/*字体大小*/
  color: #625858;/*颜色*/
  white-space: nowrap;/*强制不换行*/
  overflow: hidden;/*超宽隐藏*/
  text-overflow: ellipsis;/*超出显示点*/
  width: 9rem;/*宽度*/
  display: inline-block;/*块级元素*/
}
</style>